<template>
  <d2-container>
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-select size="small" v-model="statusVal" placeholder="请选择审核状态">
            <el-option v-for="item in statuslist" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input clearable placeholder="请输入订单号" size="small" v-model="searchList.searchValue"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker size="small" v-model="searchList.timelist" type="datetimerange" align="right" unlink-panels
                          range-separator="至"
                          value-format="yyyy-MM-dd HH-mm-ss"
                          start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="initing">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="exportToExcel">导出订单</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" border
                @selection-change="handleSelectionChange" :data="tableData" style="width: 100%" header-align="center">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="task_type" label="任务类型" align="center">
          <template slot-scope="scope">
            <span v-show="scope.row.task_type == 1" style="color:#00cca3;">购买</span>
            <span v-show="scope.row.task_type == 2" style="color:#67c23a;">点赞</span>
            <span v-show="scope.row.task_type == 3" style="color:#409eff;">评论</span>
            <span v-show="scope.row.task_type == 4" style="color:#e6a23c;">浏览</span>
            <span v-show="scope.row.task_type == 5" style="color:#e6a23c;">问大家(问)</span>
            <span v-show="scope.row.task_type == 6" style="color:#e6a23c;">问大家(答)</span>
          </template>
        </el-table-column>
        <el-table-column prop="task_class" label="平台类型" align="center">
          <template slot-scope="props">
            <p style="text-align: center;">{{
                props.row.platform_type == 1 ?
                  '饿了么' : (props.row.platform_type == 2 ? '大麦' : (props.row.platform_type == 3 ? '大众点评' : (props.row.platform_type ==
                  4 ? '美团' : '小红书')))
              }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="picture_address" label="任务主图" align="center">
          <template slot-scope="scope">
            <viewer>
              <img :src="scope.row.picture_address" style="width:80px;height:80px;" alt="">
            </viewer>
          </template>
        </el-table-column>
        <el-table-column prop="brushhands_name" label="买手姓名" width="180" align="center"></el-table-column>
        <el-table-column prop="user_commission" label="买手佣金" width="180" align="center"></el-table-column>
        <el-table-column prop="picture_address" label="买手完成截图" align="center">
          <template slot-scope="scope">
            <viewer>
              <img :src="scope.row.image" v-if="scope.row.image!=''" style="width:80px;height:80px;" alt="">
              <span v-if="scope.row.image==''">暂无上传图片</span>
            </viewer>
          </template>
        </el-table-column>
        <el-table-column prop="link" label="链接" width="200" align="center"></el-table-column>
        <el-table-column prop="price" label="商品金额" width="120" align="center">
          <template slot-scope="scope">
                  <span v-if="scope.row.task_type == 1">购买</span>
                  <span v-if="scope.row.task_type != 1">暂无购买金额</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
        <el-table-column fixed="right" label="审核" width="160" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.task_status == 7">
              <el-button @click="onPass(scope.row,1)" type="primary" plain size="mini">通过</el-button>
              <el-button @click="onPass(scope.row,2)" size="mini" type="danger" plain>拒绝</el-button>
            </div>
            <el-button v-if="scope.row.task_status == 1" type="warning" size="mini" disabled>刚领取任务</el-button>
            <el-button v-if="scope.row.task_status == 3" type="success" size="mini" plain disabled>已通过</el-button>
            <el-button v-if="scope.row.task_status == 4" type="info" size="mini" plain disabled>已拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background :page-size="10" @size-change="handleSizeChange" :page-sizes="[10, 50, 100, 300,500]"
                     :current-page="page" layout="total, sizes, prev, pager, next, jumper"
                     :total="searchList.Count" @current-change="pnChange">
      </el-pagination>
    </div>
  </d2-container>
</template>

<script>
import {task_examine, extra_refuse, task_examine_adopt} from '@/api/api'
import moment from "moment";
export default {
  name: "AdminRefundList",
  data() {
    return {
      tableData: [],
      searchList: {
        searchValue: "",
        timelist: [],
        pn: 1,
        Count: 0,
        pagesize: 10
      },
      multiple: [],
      radio1: '1',
      page: 1,
      loading: false,
      statusVal: 1,
      pagesize: 10,
      statuslist: [
        {
          value: 0,
          label: '全部'
        },
        {
          value: 1,
          label: '等待审核'
        }, {
          value: 2,
          label: '审核通过'
        }, {
          value: 3,
          label: '拒绝审核'
        }],
    }
  },
  mounted() {
    let params = {
      page: this.page,
      page_size: this.pagesize,
      status: this.statusVal,
      type: Number(this.radio1)
    }
    this.getorderList(params)
  },
  methods: {
    handleSizeChange(val) {
      let params = {
        page: this.page,
        page_size: val,
        status: this.statusVal,
        type: Number(this.radio1)
      }
      this.getorderList(params)
    },
    exportToExcel() {
      require.ensure([], () => {
        const {
          export_json_to_excel
        } = require('../../../excel/Export2Excel');
        const tHeader = ['序号', '订单编号', '订单类型', '店铺名字', '刷手会员名', '刷手手机号', '宝贝ID', '商品金额', '创建时间'];
        const filterVal = ['id', 'task_order', 'task_class', 'task_shopname', 'brushhands_tbname', 'phone', 'baby_id', 'task_bjmoney', 'create_time'];
        var arring = this.multiple
        const list = arring;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, '订单审核excel');
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleSelectionChange(val) {
      this.multiple = val
    },
    //分页
    pnChange(pn) {
      this.page = pn
      let params = {
        order: this.searchList.searchValue,
        time: this.searchList.timelist,
        page: pn,
        page_size: this.pagesize,
        status: this.statusVal,
        type: Number(this.radio1)
      }
      this.getorderList(params)
    },
    //获取订单列表
    getorderList(params) {
      task_examine(params).then(res => {
        this.searchList = res
        if (res.Status == 200) {
          this.tableData = res.Data
          console.log(this.tableData);
        } else {
          this.$message.error(res.Message)
        }
      })
    },
    //查询
    init(val) {
      console.log(this.searchList);
      let params = {
        order: this.searchList.searchValue,
        time: this.searchList.timelist,
        page: this.page,
        page_size: this.pagesize,
        status: this.statusVal,
        type: val
      }
      this.getorderList(params)
    },
    initing() {
      let params = {
        order: this.searchList.searchValue,
        time: this.searchList.timelist,
        page: this.page,
        page_size: 100,
        status: this.statusVal,
        type: Number(this.radio1)
      }
      this.getorderList(params)
    },
    //通过
    onPass(row, idx) {
      let params = {
        id: row.id,
      }
      if (idx === 1) {
        task_examine_adopt(params).then(res => {
          if (res.Status == 200) {
            this.$message({
              type: 'success',
              message: res.Message
            });
            let param = {
              page: this.page,
              page_size: this.pagesize,
              status: this.statusVal,
              type: Number(this.radio1)
            }
            this.getorderList(param)
          } else {
            this.$message({
              type: 'error',
              message: res.Message
            });
          }
        })
      } else {
        this.open(params)
      }
    },
    //拒绝
    open(params) {
      this.$prompt('请输入拒绝原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        params.note = value
        extra_refuse(params).then(res => {
          if (res.Status == 200) {
            this.$message({
              type: 'success',
              message: res.Message
            });
            this.init()
          } else {
            this.$message({
              type: 'error',
              message: res.Message
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    }
  }
}
</script>

<style scoped>
</style>
